<script>
import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
import {checkFlightInformation, queryPortInformation} from "@/api/mall";
import { roundTripList } from './boatTicketList.js';

export default {
  name: "multipleList-android",
  mixins: [ZPMixin],
  data() {
    return {
      roundTripList,
      startCities: [],
      endCities: [],
      // 路由传参
      fromCity: '',
      toCity: '',
      departureDate: '',
      returnDate: '',
      
      // 日期范围值
      dateRange: [],
      
      // 是否在切换城市
      isSwapping: false,
      
      // 日期选择器范围
      datePickerStart: '',
      datePickerEnd: '',
      
      // 去程船票列表
      departureTickets: [],
      
      // 返程船票列表
      returnTickets: [],
      
      // 选中的船票ID和舱位信息
      selectedDepartureId: null,
      selectedDepartureCabin: null,
      selectedReturnId: null,
      selectedReturnCabin: null,
      
      // 当前展开的船票ID（手风琴模式）
      activeDepartureId: null,
      activeReturnId: null,
      
      // 节流控制
      throttleTimer: null,
      
      // 是否加载中
      loading: true,
      
      // 滚动相关
      currentTab: 0, // 0: 去程, 1: 返程
      tabNames: ['去程船票', '返程船票'],
      
      // 时间间隔提示
      timeGapTip: '',
      minGapHours: 0.5, // 最小时间间隔（小时）- 改为30分钟
      warnGapHours: 2, // 警告时间间隔（小时）

      portList: [], // 港口信息
      fromPortId: '',
      toPortId: '',

      // 是否显示选择明细
      showSelectionDetail: false,
    };
  },
  computed: {
    safeAreaTop() {
      return this.$store.state.app.wxMenuClient ? this.$store.state.app.wxMenuClient.top : 0;
    },
    // 选中的去程船票
    selectedDepartureTicket() {
      return this.departureTickets.find(ticket => ticket.id === this.selectedDepartureId) || null;
    },
    // 选中的返程船票
    selectedReturnTicket() {
      return this.returnTickets.find(ticket => ticket.id === this.selectedReturnId) || null;
    },
    // 总价格
    totalPrice() {
      let total = 0;
      if (this.selectedDepartureCabin && this.selectedDepartureCabin.QPPrice) {
        total += Number(this.selectedDepartureCabin.QPPrice);
      }
      if (this.selectedReturnCabin && this.selectedReturnCabin.QPPrice) {
        total += Number(this.selectedReturnCabin.QPPrice);
      }
      return total;
    },
    // 是否可以继续下一步
    canProceed() {
      // 检查是否选择了去程和返程船票及舱位，以及时间间隔是否合法
      if (this.selectedDepartureId && this.selectedReturnId && 
          this.selectedDepartureCabin && this.selectedReturnCabin) {
        // 检查时间间隔是否符合最小要求
        const timeGap = this.calculateTimeGap();
        return timeGap >= this.minGapHours;
      }
      return false;
    },
  },
  watch: {
    '$i18n.locale'() {
      // 监听语言变化，重新设置导航栏标题
      this.setNavigationTitle();
    }
  },
  async onLoad(options) {
    // 获取路由参数
    const { fromPortId, toPortId, from, to, date, returnDate } = options;
    this.fromPortId = fromPortId || '';
    this.toPortId = toPortId || '';
    this.departureDate = date || this.getFormattedDate(new Date());

    this.setCities();

    const returnDefaultDate = new Date(this.departureDate);
    returnDefaultDate.setDate(returnDefaultDate.getDate() + 1);
    this.returnDate = returnDate || this.getFormattedDate(returnDefaultDate);
    // 根据港口ID设置城市名称和索引
    this.setPortInfo();
    // 设置日期范围
    this.dateRange = [this.departureDate, this.returnDate];
    // 设置日期选择器范围
    const today = new Date();
    this.datePickerStart = this.getFormattedDate(today);
    const endLimit = new Date();
    endLimit.setDate(endLimit.getDate() + 30);
    this.datePickerEnd = this.getFormattedDate(endLimit);
    // 加载船票数据
    this.loadTickets();
    // 设置导航栏标题
    this.setNavigationTitle();
  },
  methods: {
    setCities() {
      this.startCities = this.roundTripList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
      const find = this.roundTripList.find(item => item.PortID == this.fromPortId);
      this.endCities = find.ArrivePortList.map(item => {
        const { PortID, PortCode, PortEName, PortCName } = item;
        return {
          PortID,
          PortCode,
          PortEName,
          PortCName
        }
      });
    },
    // 设置导航栏标题
    setNavigationTitle() {
      uni.setNavigationBarTitle({
        title: this.$t('ticket.roundTrip.title', '往返船票')
      });
    },
    // 根据港口ID设置港口信息
    setPortInfo() {
      this.fromCity = this.startCities.find(item => item.PortID === this.fromPortId).PortCName;
      this.toCity = this.endCities.find(item => item.PortID === this.toPortId).PortCName;
    },
    // 加载两个方向的船票数据
    async loadTickets() {
      this.loading = true;
      // 去程
      if (this.fromPortId && this.toPortId) {
        try {
          const res = await checkFlightInformation({
            StartPortId: this.fromPortId,
            ArrivePortId: this.toPortId,
            DepartDate: this.departureDate,
          });
          this.departureTickets = this.transformTicketData(res.Data || [], this.fromCity, this.toCity);
        } catch (e) {
          this.departureTickets = [];
        }
      } else {
        this.departureTickets = [];
      }
      // 返程
      if (this.fromPortId && this.toPortId) {
        try {
          const res = await checkFlightInformation({
            StartPortId: this.toPortId,
            ArrivePortId: this.fromPortId,
            DepartDate: this.returnDate,
          });
          this.returnTickets = this.transformTicketData(res.Data || [], this.toCity, this.fromCity);
        } catch (e) {
          this.returnTickets = [];
        }
      } else {
        this.returnTickets = [];
      }
      this.loading = false;
    },
    // 转换接口数据为页面展示格式
    transformTicketData(rawTickets, fromCity, toCity) {
      return (rawTickets || []).map(ticket => {
        const departureTime = ticket.DepartTime || '';
        let arrivalTime = ticket.ArrivalTime || '';
        if (!arrivalTime && ticket.ClassMinute) {
          const [hours, minutes] = departureTime.split(':');
          const departMinutes = parseInt(hours) * 60 + parseInt(minutes);
          const arrivalMinutes = departMinutes + parseInt(ticket.ClassMinute);
          const arrivalHours = Math.floor(arrivalMinutes / 60);
          const arrivalMins = arrivalMinutes % 60;
          arrivalTime = `${String(arrivalHours).padStart(2, '0')}:${String(arrivalMins).padStart(2, '0')}`;
        }
        const cabins = (ticket.CabinList || []).map(cabin => {
          const qpPrice = (cabin.PriceList || []).find(p => p.TicketTypeCode === 'QP');
          return qpPrice ? { ...cabin, QPPrice: qpPrice.TicketPrice, QPTicket: qpPrice } : null;
        }).filter(Boolean);
        let regularSeats = 0, vipSeats = 0, luxurySeats = 0;
        let regularPrice = null, vipPrice = null, luxuryPrice = null;
        cabins.forEach(cabin => {
          if (cabin.CabinCode === 'PTC') {
            regularSeats = cabin.SeatCount || 0;
            regularPrice = cabin.QPPrice;
          } else if (cabin.CabinCode === 'TDC') {
            vipSeats = cabin.SeatCount || 0;
            vipPrice = cabin.QPPrice;
          } else if (cabin.CabinCode === 'GBC') {
            luxurySeats = cabin.SeatCount || 0;
            luxuryPrice = cabin.QPPrice;
          }
        });
        let minPrice = regularPrice ?? vipPrice ?? luxuryPrice ?? 0;
        return {
          id: ticket.ClassID,
          classNo: ticket.ClassNo,
          departureTime: departureTime,
          arrivalTime: arrivalTime,
          departurePlace: ticket.StartPortName || fromCity,
          arrivalPlace: ticket.ArrivePortName || toCity,
          duration: ticket.ClassMinute ? `${ticket.ClassMinute}${this.$t('ticket.list.minutes')}` : `50${this.$t('ticket.list.minutes')}`,
          shipName: ticket.ShipName || this.$t('ticket.list.newHaizhu'),
          price: minPrice,
          totalSeats: ticket.SeatCount || 0,
          regularSeats: regularSeats,
          vipSeats: vipSeats,
          luxurySeats: luxurySeats,
          regularPrice,
          vipPrice,
          luxuryPrice,
          cabinList: cabins,
          rawData: ticket
        };
      });
    },
    
    // 获取格式化的日期字符串 YYYY-MM-DD
    getFormattedDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 日期范围变更处理
    onDateRangeChange(range) {
      if (Array.isArray(range) && range.length === 2) {
        this.departureDate = range[0];
        this.returnDate = range[1];
        this.dateRange = range;
        
        // 重新加载船票列表
        this.loadTickets();
        this.selectedDepartureId = null;
        this.selectedReturnId = null;
      }
    },
    
    // 交换出发地和目的地
    swapCities() {
      if (this.isSwapping) return;
      
      this.isSwapping = true;
      
      setTimeout(() => {
        // 往返的船票一定能够切换，只需要修改往返的岛屿ID和名称即可
        const tempId = this.toPortId;
        const tempName = this.toCity;
        this.toPortId = this.fromPortId;
        this.toCity = this.fromCity;
        this.fromPortId = tempId;
        this.fromCity = tempName;
        
        this.isSwapping = false;
        
        // 重新加载船票列表
        this.loadTickets();
        this.selectedDepartureId = null;
        this.selectedDepartureCabin = null;
        this.selectedReturnId = null;
        this.selectedReturnCabin = null;
      }, 300);
    },
    
    // 选择去程船票
    selectDepartureTicket(ticketId, ticket, cabin) {
      console.log('选择去程船票:', ticketId, cabin);
      this.selectedDepartureId = ticketId;
      this.selectedDepartureCabin = cabin;

      // 给用户反馈
      uni.showToast({
        title: `已选择去程 ${cabin.CabinName} ¥${cabin.QPPrice}`,
        icon: 'none',
        duration: 1500
      });
      
      // 检查时间间隔
      this.checkTimeGap();
      
      // 延迟300ms后自动切换到返程列表
      setTimeout(() => {
        // 切换到返程列表
        this.currentTab = 1;
      }, 300);
    },
    
    // 选择返程船票
    selectReturnTicket(ticketId, ticket, cabin) {
      console.log('选择返程船票:', ticketId, cabin);
      this.selectedReturnId = ticketId;
      this.selectedReturnCabin = cabin;

      // 给用户反馈
      uni.showToast({
        title: `已选择返程 ${cabin.CabinName} ¥${cabin.QPPrice}`,
        icon: 'none',
        duration: 1500
      });
      
      // 检查时间间隔
      this.checkTimeGap();
    },
    
    // 切换去程船票展开/折叠状态
    toggleDepartureExpand(ticketId, ticket) {
      if (ticket.totalSeats === '0') return;
      if (this.activeDepartureId === ticketId) {
        this.activeDepartureId = null;
      } else {
        this.activeDepartureId = ticketId;
      }
    },
    
    // 切换返程船票展开/折叠状态
    toggleReturnExpand(ticketId, ticket) {
      if (ticket.totalSeats === '0') return;
      if (this.activeReturnId === ticketId) {
        this.activeReturnId = null;
      } else {
        this.activeReturnId = ticketId;
      }
    },
    
    // 预订船票
    proceedToBooking() {
      if (!this.canProceed) {
        if (this.timeGapTip && this.timeGapTip.includes(this.$t('ticket.roundTrip.cannotBook'))) {
          uni.showToast({
            title: this.timeGapTip,
            icon: 'none'
          });
        } else if (!this.selectedDepartureId || !this.selectedReturnId || 
                   !this.selectedDepartureCabin || !this.selectedReturnCabin) {
          uni.showToast({
            title: '请选择去程和返程的具体舱位',
            icon: 'none'
          });
        }
        return;
      }
      const departureTicket = this.selectedDepartureTicket;
      const returnTicket = this.selectedReturnTicket;
      
      // 使用用户选中的舱位信息
      const departureCabin = this.selectedDepartureCabin || {};
      const returnCabin = this.selectedReturnCabin || {};
      
      const params = {
        departureId: departureTicket.id,
        classNo: departureTicket.classNo,
        departureTime: departureTicket.departureTime,
        arrivalTime: departureTicket.arrivalTime,
        duration: departureTicket.duration,
        shipName: departureTicket.shipName,
        seatType: departureCabin.CabinCode || 'PTC',
        cabinId: departureCabin.CabinID || '',
        cabinCode: departureCabin.CabinCode || '',
        cabinName: departureCabin.CabinName || '',
        cabinPrice: departureCabin.QPPrice || 0,
        from: this.fromCity,
        to: this.toCity,
        departureDate: this.departureDate,
        returnDate: this.returnDate,
        orderType: '1',
        returnId: returnTicket.id,
        returnClassNo: returnTicket.classNo,
        returnDepartureTime: returnTicket.departureTime,
        returnArrivalTime: returnTicket.arrivalTime,
        returnDuration: returnTicket.duration,
        returnShipName: returnTicket.shipName,
        returnSeatType: returnCabin.CabinCode || 'PTC',
        returnCabinId: returnCabin.CabinID || '',
        returnCabinCode: returnCabin.CabinCode || '',
        returnCabinName: returnCabin.CabinName || '',
        returnCabinPrice: returnCabin.QPPrice || 0,
        startPortId: this.fromPortId,
        arrivePortId: this.toPortId
      };
      uni.navigateTo({
        url: `/ticket_subpages/index/predetermined?${Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key])}`).join('&')}`
      });
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 格式化日期显示
    formatDateDisplay(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekDays = [
        this.$t('common.weekdays.sunday'),
        this.$t('common.weekdays.monday'),
        this.$t('common.weekdays.tuesday'),
        this.$t('common.weekdays.wednesday'),
        this.$t('common.weekdays.thursday'),
        this.$t('common.weekdays.friday'),
        this.$t('common.weekdays.saturday')
      ];
      const weekDay = weekDays[date.getDay()];
      
      return `${month}月${day}日 ${weekDay}`;
    },
    
    // 切换标签 - 点击导航标签时
    switchTab(index) {
      if (this.currentTab === index) return;
      
      this.currentTab = index;
    },
    
    // 计算去程到达时间和返程出发时间之间的间隔（小时）
    calculateTimeGap() {
      if (!this.selectedDepartureTicket || !this.selectedReturnTicket) {
        return 24; // 默认返回足够大的值
      }
      
      // 如果去程和返程是同一天，需要计算具体时间差
      if (this.departureDate === this.returnDate) {
        // 解析去程到达时间
        const departureDate = new Date(this.departureDate);
        const [arrivalHours, arrivalMinutes] = this.selectedDepartureTicket.arrivalTime.split(':').map(Number);
        departureDate.setHours(arrivalHours, arrivalMinutes, 0);
        
        // 解析返程出发时间
        const returnDate = new Date(this.returnDate);
        const [departureHours, departureMinutes] = this.selectedReturnTicket.departureTime.split(':').map(Number);
        returnDate.setHours(departureHours, departureMinutes, 0);
        
        // 计算时间差（小时）
        const diffMs = returnDate - departureDate;
        const diffHours = diffMs / (1000 * 60 * 60);
        
        return diffHours;
      } else {
        // 如果不是同一天，则时间差肯定足够
        return 24; 
      }
    },
    
    // 检查时间间隔并设置提示
    checkTimeGap() {
      if (this.selectedDepartureId && this.selectedReturnId) {
        const timeGap = this.calculateTimeGap();
        console.log('时间间隔计算:', {
          arrivalTime: this.selectedDepartureTicket.arrivalTime,
          departureTime: this.selectedReturnTicket.departureTime,
          timeGap: timeGap,
          minGapHours: this.minGapHours
        });

        if (timeGap < this.minGapHours) {
          const gapMinutes = Math.round(timeGap * 60);
          const minMinutes = Math.round(this.minGapHours * 60);
          this.timeGapTip = `去程到达(${this.selectedDepartureTicket.arrivalTime})与返程出发(${this.selectedReturnTicket.departureTime})间隔${gapMinutes}分钟，建议至少间隔${minMinutes}分钟`;
          
          // 不再直接显示Toast，让用户自己决定
        } else if (timeGap < this.warnGapHours) {
          const gapMinutes = Math.round(timeGap * 60);
          this.timeGapTip = `去程到达(${this.selectedDepartureTicket.arrivalTime})与返程出发(${this.selectedReturnTicket.departureTime})间隔${gapMinutes}分钟，时间较紧`;
        } else {
          this.timeGapTip = '';
        }
      } else {
        this.timeGapTip = '';
      }
    },

    // 切换选择明细显示
    toggleSelectionDetail() {
      this.showSelectionDetail = !this.showSelectionDetail;
    },

    // 是否为选中的舱位
    isSelectedCabin(ticketId, cabinId, isReturn = false) {
      if (isReturn) {
        return this.selectedReturnId === ticketId && 
               this.selectedReturnCabin && 
               this.selectedReturnCabin.CabinID === cabinId;
      } else {
        return this.selectedDepartureId === ticketId && 
               this.selectedDepartureCabin && 
               this.selectedDepartureCabin.CabinID === cabinId;
      }
    },

    // 根据舱位代码获取对应图标
    getCabinIcon(cabinCode, index) {
      const iconMap = {
        'PTC': 'https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616113955.png',
        'TDC': 'https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616177090.png',
        'GBC': 'https://wzws.wanshanlundiao.cn/upload/img/20250423/202504231616229121.png'
      };
      return iconMap[cabinCode] || iconMap['PTC'];
    },
  }
}
</script>

<template>
  <view class="round-trip-container">
    <!-- 顶部导航栏 -->
    <view class="header" :style="{paddingTop: safeAreaTop + 'px'}">
      <view class="nav-bar">
        <view class="back-btn" @click="goBack">
          <image src="/static/home/right-arrow-black.png"></image>
        </view>
        
        <!-- 路线选择 -->
        <view class="nav-route-selection">
          <!-- 出发城市选择 -->
          <text class="city">{{ fromCity }}</text>
          
          <!-- 方向箭头 -->
          <view class="direction-arrow" :class="{'rotating': isSwapping}" @click="swapCities">
            <text class="arrow-icon">→</text>
          </view>
          
          <!-- 目的地城市选择 -->
          <text class="city">{{ toCity }}</text>
        </view>
        
        <view class="right-icons"></view>
      </view>
      
      <!-- 日期范围选择 -->
      <view class="date-range-picker">
        <uni-datetime-picker
          type="daterange"
          v-model="dateRange"
          :start="datePickerStart"
          :end="datePickerEnd"
          @change="onDateRangeChange"
          :clear-icon="false"
          rangeSeparator="至"
        >
          <view class="date-display">
            <view class="date-item">
              <text class="date-label">{{$t('ticket.roundTrip.outbound')}}</text>
              <text class="date-value">{{formatDateDisplay(departureDate)}}</text>
            </view>
            <view class="date-separator"></view>
            <view class="date-item">
              <text class="date-label">{{$t('ticket.roundTrip.return')}}</text>
              <text class="date-value">{{formatDateDisplay(returnDate)}}</text>
            </view>
            <view class="date-arrow"></view>
          </view>
        </uni-datetime-picker>
      </view>
      
      <!-- 标签切换导航 -->
      <view class="tab-navigation">
        <view 
          class="tab-item" 
          :class="{'active': currentTab === 0}" 
          @click="switchTab(0)"
        >
          <text>{{$t('ticket.roundTrip.outboundTickets')}}</text>
        </view>
        <view 
          class="tab-item" 
          :class="{'active': currentTab === 1}" 
          @click="switchTab(1)"
        >
          <text>{{$t('ticket.roundTrip.returnTickets')}}</text>
        </view>
      </view>
    </view>
    
    <!-- 票列表容器 -->
    <view class="tickets-container">
      <!-- 去程列表 -->
      <view class="tickets-column" v-show="currentTab === 0">
        <view class="column-header">
          <view class="column-title departure-title">{{$t('ticket.roundTrip.outboundTickets')}}</view>
          <view class="column-date">{{formatDateDisplay(departureDate)}}</view>
        </view>
        
        <view class="ticket-list-wrapper">
          <!-- 加载中提示 -->
          <view class="loading-container" v-if="loading">
            <view class="loading-spinner"></view>
            <text>{{$t('ticket.roundTrip.loadingTickets')}}</text>
          </view>
          
          <!-- 船票列表 -->
          <scroll-view scroll-y class="ticket-list" v-else>
            <view v-if="departureTickets.length === 0" class="empty-list">
              <text>{{$t('ticket.roundTrip.noTicketsAvailable')}}</text>
            </view>
            
            <view 
              v-for="ticket in departureTickets" 
              :key="ticket.id"
              class="ticket-item"
              :class="{
                'ticket-selected': selectedDepartureId === ticket.id,
                'ticket-item__no_seat': ticket.totalSeats === '0',
              }"
              @click="toggleDepartureExpand(ticket.id, ticket)"
            >
              <!-- 主要信息行 -->
              <view class="main-info-row">
                <!-- 船票时间和地点信息 -->
                <view class="ticket-time-info">
                  <!-- 出发信息 -->
                  <view class="departure-info">
                    <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.departureTime}}</text>
                    <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.departurePlace}}</text>
                  </view>
                  
                  <!-- 路线信息 -->
                  <view class="route-info">
                    <text class="duration">{{ticket.duration}}</text>
                    <image
                      src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
                      mode="aspectFit"
                      class="ship-icon"
                      :class="{'ship-icon__no_seat': ticket.totalSeats === '0'}"
                    />
                    <text class="ship-name">{{ticket.shipName || $t('ticket.list.newHaizhu')}}</text>
                  </view>
                  
                  <!-- 到达信息 -->
                  <view class="arrival-info">
                    <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalTime}}</text>
                    <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalPlace}}</text>
                  </view>
                </view>
                
                <!-- 价格和折叠箭头 -->
                <view v-if="ticket.totalSeats !== '0'" class="ticket-right">
                  <!-- 价格信息 -->
                  <view class="price-container">
                    <view class="price">
                      <text class="price-symbol">¥</text>
                      <text class="price-value">{{ticket.price}}</text>
                    </view>
                    <text class="total-seats">{{$t('ticket.list.totalTickets', {count: ticket.totalSeats})}}</text>
                  </view>
                  
                  <!-- 折叠指示箭头 -->
                  <view class="expand-arrow" :class="{'expanded': activeDepartureId === ticket.id}">
                    <view class="arrow"></view>
                  </view>
                </view>
                <view v-else class="ticket-right__no_seat">
                  <view class="no-seat">
                    <text>已售罄</text>
                  </view>
                </view>
              </view>
              
              <!-- 座位信息条 -->
              <view v-if="ticket.totalSeats !== '0'" class="seat-capacity-row">
                <view 
                  class="seat-type-item"
                  v-for="(cabin, index) in ticket.cabinList"
                  :key="cabin.CabinID"
                  v-if="cabin.QPPrice"
                >
                  <image 
                    :src="getCabinIcon(cabin.CabinCode, index)" 
                    class="seat-icon"
                    :class="{
                      'seat-icon-head': cabin.CabinCode === 'TDC',
                      'seat-icon-luxury': cabin.CabinCode === 'GBC'
                    }"
                  ></image>
                  <text class="seat-type">{{cabin.CabinName}}:</text>
                  <text class="seat-number">{{cabin.SeatCount}}张</text>
                </view>
              </view>
              
              <!-- 展开的详细信息 -->
              <view class="ticket-detail-wrapper">
                <view class="ticket-detail" :class="{'expanded': activeDepartureId === ticket.id}">
                  <view class="seat-types">
                    <view 
                      class="seat-type-item"
                      v-for="cabin in ticket.cabinList"
                      :key="cabin.CabinID"
                      v-if="cabin.QPPrice"
                      :class="{'seat-selected': isSelectedCabin(ticket.id, cabin.CabinID, false)}"
                    >
                      <text class="seat-name">{{cabin.CabinName}}</text>
                      <text class="seat-price">¥{{cabin.QPPrice}}</text>
                      <text class="seat-count">{{cabin.SeatCount}}张</text>
                      <view class="seat-book-btn"
                        :class="{
                          'disabled': cabin.SeatCount <= 0,
                          'selected': isSelectedCabin(ticket.id, cabin.CabinID, false)
                        }"
                        @click.stop="selectDepartureTicket(ticket.id, ticket, cabin)">
                        <text>{{isSelectedCabin(ticket.id, cabin.CabinID, false) ? '已选' : $t('ticket.list.book')}}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 返程列表 -->
      <view class="tickets-column" v-show="currentTab === 1">
        <view class="column-header">
          <view class="column-title return-title">{{$t('ticket.roundTrip.returnTickets')}}</view>
          <view class="column-date">{{formatDateDisplay(returnDate)}}</view>
        </view>
        
        <view class="ticket-list-wrapper">
          <!-- 加载中提示 -->
          <view class="loading-container" v-if="loading">
            <view class="loading-spinner"></view>
            <text>{{$t('ticket.roundTrip.loadingTickets')}}</text>
          </view>
          
          <!-- 船票列表 -->
          <scroll-view scroll-y class="ticket-list" v-else>
            <view v-if="returnTickets.length === 0" class="empty-list">
              <text>{{$t('ticket.roundTrip.noTicketsAvailable')}}</text>
            </view>
            
            <view 
              v-for="ticket in returnTickets" 
              :key="ticket.id"
              class="ticket-item"
              :class="{
                'ticket-selected': selectedReturnId === ticket.id,
                'ticket-item__no_seat': ticket.totalSeats === '0',
              }"
              @click="toggleReturnExpand(ticket.id, ticket)"
            >
              <!-- 主要信息行 -->
              <view class="main-info-row">
                <!-- 船票时间和地点信息 -->
                <view class="ticket-time-info">
                  <!-- 出发信息 -->
                  <view class="departure-info">
                    <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.departureTime}}</text>
                    <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.departurePlace}}</text>
                  </view>
                  
                  <!-- 路线信息 -->
                  <view class="route-info">
                    <text class="duration">{{ticket.duration}}</text>
                    <image
                      src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121415369158.png"
                      mode="aspectFit"
                      class="ship-icon"
                      :class="{'ship-icon__no_seat': ticket.totalSeats === '0'}"
                    />
                    <text class="ship-name">{{ticket.shipName || $t('ticket.list.newHaizhu')}}</text>
                  </view>
                  
                  <!-- 到达信息 -->
                  <view class="arrival-info">
                    <text class="time" :class="{'time__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalTime}}</text>
                    <text class="place" :class="{'place__no_seat': ticket.totalSeats === '0'}">{{ticket.arrivalPlace}}</text>
                  </view>
                </view>
                
                <!-- 价格和折叠箭头 -->
                <view v-if="ticket.totalSeats !== '0'" class="ticket-right">
                  <!-- 价格信息 -->
                  <view class="price-container">
                    <view class="price">
                      <text class="price-symbol">¥</text>
                      <text class="price-value">{{ticket.price}}</text>
                    </view>
                    <text class="total-seats">{{$t('ticket.list.totalTickets', {count: ticket.totalSeats})}}</text>
                  </view>
                  
                  <!-- 折叠指示箭头 -->
                  <view class="expand-arrow" :class="{'expanded': activeReturnId === ticket.id}">
                    <view class="arrow"></view>
                  </view>
                </view>
                <view v-else class="ticket-right__no_seat">
                  <view class="no-seat">
                    <text>已售罄</text>
                  </view>
                </view>
              </view>
              
              <!-- 座位信息条 -->
              <view v-if="ticket.totalSeats !== '0'" class="seat-capacity-row">
                <view 
                  class="seat-type-item"
                  v-for="(cabin, index) in ticket.cabinList"
                  :key="cabin.CabinID"
                  v-if="cabin.QPPrice"
                >
                  <image 
                    :src="getCabinIcon(cabin.CabinCode, index)" 
                    class="seat-icon"
                    :class="{
                      'seat-icon-head': cabin.CabinCode === 'TDC',
                      'seat-icon-luxury': cabin.CabinCode === 'GBC'
                    }"
                  ></image>
                  <text class="seat-type">{{cabin.CabinName}}:</text>
                  <text class="seat-number">{{cabin.SeatCount}}张</text>
                </view>
              </view>
              
              <!-- 展开的详细信息 -->
              <view class="ticket-detail-wrapper">
                <view class="ticket-detail" :class="{'expanded': activeReturnId === ticket.id}">
                  <view class="seat-types">
                    <view 
                      class="seat-type-item"
                      v-for="cabin in ticket.cabinList"
                      :key="cabin.CabinID"
                      v-if="cabin.QPPrice"
                      :class="{'seat-selected': isSelectedCabin(ticket.id, cabin.CabinID, true)}"
                    >
                      <text class="seat-name">{{cabin.CabinName}}</text>
                      <text class="seat-price">¥{{cabin.QPPrice}}</text>
                      <text class="seat-count">{{cabin.SeatCount}}张</text>
                      <view class="seat-book-btn"
                        :class="{
                          'disabled': cabin.SeatCount <= 0,
                          'selected': isSelectedCabin(ticket.id, cabin.CabinID, true)
                        }"
                        @click.stop="selectReturnTicket(ticket.id, ticket, cabin)">
                        <text>{{isSelectedCabin(ticket.id, cabin.CabinID, true) ? '已选' : $t('ticket.list.book')}}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    
    <!-- 选择明细弹窗 -->
    <view class="selection-detail-overlay" v-if="showSelectionDetail" @click="toggleSelectionDetail">
      <view class="selection-detail-popup" @click.stop>
        <view class="detail-header">
          <text class="detail-title">选择明细</text>
          <view class="close-btn" @click="toggleSelectionDetail">×</view>
        </view>
        
        <view class="detail-content">
          <!-- 去程票详情 -->
          <view class="ticket-detail-section" v-if="selectedDepartureTicket && selectedDepartureCabin">
            <view class="section-title">去程船票</view>
            <view class="ticket-info">
              <view class="info-row">
                <text class="label">班次:</text>
                <text class="value">{{selectedDepartureTicket.classNo}}</text>
              </view>
              <view class="info-row">
                <text class="label">时间:</text>
                <text class="value">{{selectedDepartureTicket.departureTime}} - {{selectedDepartureTicket.arrivalTime}}</text>
              </view>
              <view class="info-row">
                <text class="label">路线:</text>
                <text class="value">{{selectedDepartureTicket.departurePlace}} → {{selectedDepartureTicket.arrivalPlace}}</text>
              </view>
              <view class="info-row">
                <text class="label">舱位:</text>
                <text class="value">{{selectedDepartureCabin.CabinName}}</text>
              </view>
              <view class="info-row">
                <text class="label">价格:</text>
                <text class="value price">¥{{selectedDepartureCabin.QPPrice}}</text>
              </view>
            </view>
          </view>

          <!-- 返程票详情 -->
          <view class="ticket-detail-section" v-if="selectedReturnTicket && selectedReturnCabin">
            <view class="section-title">返程船票</view>
            <view class="ticket-info">
              <view class="info-row">
                <text class="label">班次:</text>
                <text class="value">{{selectedReturnTicket.classNo}}</text>
              </view>
              <view class="info-row">
                <text class="label">时间:</text>
                <text class="value">{{selectedReturnTicket.departureTime}} - {{selectedReturnTicket.arrivalTime}}</text>
              </view>
              <view class="info-row">
                <text class="label">路线:</text>
                <text class="value">{{selectedReturnTicket.departurePlace}} → {{selectedReturnTicket.arrivalPlace}}</text>
              </view>
              <view class="info-row">
                <text class="label">舱位:</text>
                <text class="value">{{selectedReturnCabin.CabinName}}</text>
              </view>
              <view class="info-row">
                <text class="label">价格:</text>
                <text class="value price">¥{{selectedReturnCabin.QPPrice}}</text>
              </view>
            </view>
          </view>

          <!-- 总计 -->
          <view class="total-section">
            <view class="total-row">
              <text class="total-label">总计:</text>
              <text class="total-amount">¥{{totalPrice}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="bottom-action">
      <!-- 时间间隔提示 -->
      <view class="time-gap-warning"
        v-if="timeGapTip"
        :class="{'gap-warning': timeGapTip.includes('较紧'), 'gap-info': !timeGapTip.includes('较紧')}">
        <text>{{timeGapTip}}</text>
      </view>
      
      <view class="bottom-action-bar">
        <view class="total-info">
          <text class="total-label">{{$t('ticket.roundTrip.total')}}</text>
          <text class="total-price">¥{{totalPrice}}</text>
          <view class="detail-btn" @click="toggleSelectionDetail" v-if="selectedDepartureId || selectedReturnId">
            <text class="detail-text">明细</text>
            <view class="detail-arrow" :class="{'expanded': showSelectionDetail}">▼</view>
          </view>
        </view>
        <view 
          class="book-btn" 
          :class="{'btn-enabled': canProceed}"
          @click="proceedToBooking"
        >
          <text>{{$t('ticket.roundTrip.confirmSelection')}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-trip-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); /* 为底部操作栏留出空间 */
}

/* 顶部导航栏 */
.header {
  background-color: #e0f7ff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 44px;

  .back-btn {
    width: 30rpx;

    image {
      transform: rotate(180deg);
      width: 13rpx;
      height: 24rpx;
    }
  }
  
  .nav-route-selection {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .city {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
    
    .direction-arrow {
      margin: 0 30rpx;
      color: #00a0e9;
      transition: transform 0.3s;
      
      &.rotating {
        transform: rotate(180deg);
      }
      
      .arrow-icon {
        font-size: 36rpx;
      }
    }
  }
  
  .right-icons {
    width: 30rpx;
  }
}

/* 日期范围选择器 */
.date-range-picker {
  padding: 0 30rpx;
}

.date-display {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8rpx;
  padding: 0 16rpx 20rpx;
  
  .date-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .date-label {
      font-size: 22rpx;
      color: #666;
      margin-bottom: 8rpx;
    }
    
    .date-value {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .date-separator {
    width: 30rpx;
    height: 1px;
    background-color: #ccc;
    margin: 0 20rpx;
  }
  
  .date-arrow {
    width: 16rpx;
    height: 16rpx;
    border-right: 2rpx solid #666;
    border-bottom: 2rpx solid #666;
    transform: rotate(45deg);
    margin-left: auto;
  }
}

/* 标签导航 */
.tab-navigation {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1px solid rgba(0,0,0,0.05);
  background-color: #fff;
  
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 15rpx 0;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #498FFF;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background-color: #498FFF;
        border-radius: 3rpx;
      }
    }
  }
}

.column-header {
  padding: 16rpx;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  
  .column-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding: 10rpx 0;
    border-radius: 6rpx;
    
    &.departure-title {
      background-color: #e0f2ff;
      color: #498FFF;
    }
    
    &.return-title {
      background-color: #ffecec;
      color: #ff5233;
    }
  }
  
  .column-date {
    font-size: 24rpx;
    color: #666;
    text-align: center;
    padding: 8rpx 0;
  }
}

/* 票列表容器 */
.tickets-container {
  margin-top: 360rpx; /* 适配固定头部高度 */
  flex: 1;
  overflow: hidden;
  padding: 0 30rpx;
}

.tickets-column {
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  height: calc(100vh - 380rpx);
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ticket-list-wrapper {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 120rpx);
}

.ticket-list {
  height: 100%;
  box-sizing: border-box;
  padding: 10rpx;
  /* 安卓设备特别优化 */
  -webkit-overflow-scrolling: touch;
}

.ticket-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  &__no_seat {
    background-color: #f2f2f2;
  }
  
  &.ticket-selected {
    background-color: #f0f9ff;
    border: 2rpx solid #498FFF;
    box-shadow: 0 4rpx 12rpx rgba(73, 143, 255, 0.2);
  }
  
  .main-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10rpx;
  }
  
  .ticket-time-info {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    flex: 1;
    max-width: 70%;
  }
  
  .departure-info, .arrival-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140rpx;
    
    .time {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 5rpx;
      &__no_seat {
        color: #9b9b9b;
        font-weight: normal;
      }
    }
    
    .place {
      font-size: 20rpx;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      &__no_seat {
        color: #9b9b9b;
        font-weight: normal;
      }
    }
  }
  
  .route-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15rpx;
    margin-bottom: 15rpx;

    .ship-icon {
      width: 180rpx;
      height: 18rpx;
      &__no_seat {
        filter: grayscale(100%);
      }
    }

    .duration {
      font-size: 22rpx;
      color: #999;
    }
    .ship-name {
      font-size: 22rpx;
      color: #999;
    }
  }
  
  .ticket-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 30%;
  }
  .ticket-right__no_seat {
    height: 100%;
    .no-seat {
      height: 100%;
      display: flex;
      align-items: center;
      color: #9b9b9b;
      text {
        font-size: 28rpx;
      }
    }
  }
  
  .price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 10rpx;
    
    .price {
      display: flex;
      align-items: baseline;
      
      .price-symbol {
        font-size: 24rpx;
        color: #ff5233;
      }
      
      .price-value {
        font-size: 34rpx;
        font-weight: bold;
        color: #ff5233;
      }
    }
    
    .total-seats {
      font-size: 20rpx;
      color: #999;
      margin-top: 4rpx;
    }
  }
  
  .expand-arrow {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12rpx;
    transition: all 0.3s;
    
    .arrow {
      width: 14rpx;
      height: 14rpx;
      border-right: 2rpx solid #999;
      border-bottom: 2rpx solid #999;
      transform: rotate(45deg);
      transition: all 0.3s;
    }
    
    &.expanded .arrow {
      transform: rotate(-135deg);
    }
  }
}

.empty-list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  
  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #3a7fe6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }
  
  text {
    font-size: 26rpx;
    color: #999;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 底部操作区 */
.bottom-action {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 90;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  
  /* 时间间隔警告 */
  .time-gap-warning {
    width: 100%;
    padding: 15rpx;
    border-radius: 6rpx;
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;
    
    &.gap-warning {
      background-color: #fff8e6;
      border-left: 8rpx solid #ff9900;
      
      text {
        color: #ff6600;
      }
    }
    
    &.gap-info {
      background-color: #e6f7ff;
      border-left: 8rpx solid #1890ff;
      
      text {
        color: #1890ff;
      }
    }
    
    text {
      font-size: 24rpx;
    }
  }
  
  /* 底部操作栏 */
  .bottom-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .total-info {
    display: flex;
    align-items: center;
    
    .total-label {
      font-size: 28rpx;
      color: #333;
    }
    
    .total-price {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff5233;
      margin-right: 16rpx;
    }
  }

  .detail-btn {
    display: flex;
    align-items: center;
    padding: 8rpx 16rpx;
    background-color: #f5f5f5;
    border-radius: 20rpx;
    cursor: pointer;
    margin-left: 8rpx;

    .detail-text {
      font-size: 24rpx;
      color: #666;
      margin-right: 6rpx;
    }

    .detail-arrow {
      font-size: 16rpx;
      color: #666;
      transition: transform 0.3s;

      &.expanded {
        transform: rotate(180deg);
      }
    }
  }
  
  .book-btn {
    width: 240rpx;
    height: 80rpx;
    background-color: #ccc;
    border-radius: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    
    text {
      color: #fff;
      font-size: 28rpx;
      font-weight: bold;
    }
    
    &.btn-enabled {
      background-color: #498FFF;
    }
  }
}

.ticket-detail-wrapper {
  width: 100%;
  clear: both;
  overflow: hidden;
  
  .ticket-detail {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-10rpx);
    
    &.expanded {
      max-height: 500rpx;
      opacity: 1;
      transform: translateY(0);
      border-top: 1px dashed #eee;
      padding-top: 15rpx;
    }
    
    .seat-types {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
}

.seat-type-item {
  width: 100%;
  padding: 12rpx 15rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  
  &:last-child {
    border-bottom: none;
  }

  &.seat-selected {
    background-color: #e6f7ff;
  }
  
  .seat-name {
    font-size: 24rpx;
    color: #333;
    flex: 1;
  }
  
  .seat-price {
    font-size: 28rpx;
    font-weight: bold;
    color: #ff5233;
    flex: 1;
    text-align: center;
  }
  
  .seat-count {
    font-size: 22rpx;
    color: #999;
    flex: 1;
    text-align: center;
  }
  
  .seat-book-btn {
    width: 100rpx;
    height: 52rpx;
    background-color: #498FFF;
    border-radius: 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
    box-shadow: 0 2rpx 8rpx rgba(73, 143, 255, 0.3);

    &:active {
      transform: scale(0.95);
      box-shadow: 0 1rpx 4rpx rgba(73, 143, 255, 0.5);
    }

    &.disabled {
      background-color: #cccccc;
      cursor: not-allowed;
      box-shadow: none;
      
      &:active {
        transform: none;
      }
    }

    &.selected {
      background-color: #52c41a;
      box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
    }
    
    text {
      color: #fff;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
}

/* 座位信息条 */
.seat-capacity-row {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 6rpx 10rpx;
  clear: both;
  
  .seat-type-item {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    border-bottom: none;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    
    .seat-icon {
      width: 22rpx;
      height: 22rpx;
      color: #999;
      margin-right: 4rpx;
    }
    
    .seat-icon-head {
      color: #498FFF;
    }
    
    .seat-icon-luxury {
      color: #ff5233;
    }
    
    .seat-type {
      font-size: 22rpx;
      color: #666;
    }
    
    .seat-number {
      font-size: 22rpx;
      color: #498FFF;
      font-weight: 500;
    }
  }
}

/* 选择明细弹窗 */
.selection-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selection-detail-popup {
  width: 90%;
  max-width: 600rpx;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1px solid #f0f0f0;

  .detail-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    color: #999;
    cursor: pointer;
    border-radius: 30rpx;
    
    &:hover {
      background-color: #f5f5f5;
    }
  }
}

.detail-content {
  padding: 20rpx 30rpx 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.ticket-detail-section {
  margin-bottom: 30rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
    padding-bottom: 8rpx;
    border-bottom: 2rpx solid #e6f7ff;
  }

  .ticket-info {
    background-color: #fafafa;
    border-radius: 8rpx;
    padding: 20rpx;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      font-size: 26rpx;
      color: #666;
      min-width: 80rpx;
    }

    .value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      flex: 1;

      &.price {
        color: #ff5233;
        font-weight: bold;
      }
    }
  }
}

.total-section {
  border-top: 2rpx solid #f0f0f0;
  padding-top: 20rpx;

  .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .total-label {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }

    .total-amount {
      font-size: 36rpx;
      font-weight: bold;
      color: #ff5233;
    }
  }
}
</style>